<template>
<div class="page-trade sale">
  <div class="page-trade-top">
    <div class="page-trade-title">基本信息</div>
    <ul>
      <li>
        <div><i class="icon maliiconfont maliicon-img_details_custodia"></i> 出售方</div>
        <p>{{tradeData.sellerName}}</p>
      </li>
      <li >
        <div><i class="icon maliiconfont maliicon-img_detailse_refund"></i> 交易对象</div>
        <p>{{tradeData.buyerName}}</p>
      </li>
      <li>
        <div><i class="icon maliiconfont maliicon-storehouse"></i> 保管人</div>
        <p>{{tradeData.storageCompanyName}}</p>
      </li>
      <li>
        <div><i class="icon maliiconfont maliicon-img_details_allocati"></i> 保管仓</div>
        <p>{{tradeData.storageName}}</p>
      </li>
      <li >
        <div><i class="icon maliiconfont maliicon-img_details_figure"></i> 申请人</div>
        <p>{{tradeData.creator}}</p>
      </li>
      <li>
        <div><i class="icon maliiconfont maliicon-img_details_calendar"></i> 申请时间</div>
        <p>{{tradeData.createdTime}}</p>
      </li>
    </ul>
  </div>
  <div class="page-trade-box">
    <div class="trade-box-title">交易信息</div>
    <div class="trade-box-title-des" v-if="tradeData.repurchaseLastDate || tradeData.repurchaseDays ">
      <span v-if="tradeData.sellDate">出售日期：{{tradeData.sellDate}}</span> &nbsp;&nbsp;<span v-if="tradeData.repurchaseLastDate">最晚回购日期：{{tradeData.repurchaseLastDate}}</span> <span v-if="tradeData.repurchaseDays">货物期望回购期限：{{tradeData.repurchaseDays}}</span>
    </div>
    <egrid class="egrid-class" border
           show-summary
           sum-text="合计"
           :summary-method="getSummaries"
           :data="wmsArDetailGoodsVoList"
           :columns="goodsColumns"
           propSpan="wrId"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>
  </div>
  <div class="page-trade-audit-box" v-if="!!tradeData.applyDesc">
    <span class="title-trade">审核说明：</span>
    <span class="con-trade">{{tradeData.applyDesc}}</span>
  </div>
  <div class="trade-btn-group" v-if="tradeData.pageType === 0">
    <el-button class="singleBtnClass" @click="confirmTrade(1)" v-permission="['wms:trade:buyback:confirm:pass']" type="primary">同意</el-button>
    <el-button class="singleBtnClass" @click="confirmTrade(2)" type="primary" v-permission="['wms:trade:buyback:confirm:refuse']" plain>不同意</el-button>
  </div>
  <pc-dialog :is-show="isBillDetail"  title ='仓单详情' @on-close="isBillDetail = false">
    <div >
      <bill-detail :id="wrId"></bill-detail>
    </div>
  </pc-dialog>
</div>
</template>
<script>
import PcDialog from 'components/dialog';
import BillDetail from 'src/views/wms/dataquery/billlist/billManagement/billDetail';
// 页面展示 信息  根据Id获取约定回购详情   GET /ar/getArDetailByArId
let that;
// 操作按钮
var Btn = {
  template: `<div style="text-align: center">
        <el-button type="primary" plain @click="viewdetail(row)">查看</el-button>
      </div>`,
  props: ['row'],
  computed: {},
  methods: {
    // 查看仓单详情
    viewdetail(val) {
      this.$emit('view-detail', val);
    }
  }
};
export default {
  props: ['tradeData'],
  components: {
    PcDialog, BillDetail
  },
  created () {
    that = this;
  },
  computed: {
    wmsArDetailGoodsVoList () {
      if (this.tradeData.wmsArDetailGoodsVoList) {
        for (var i = 0; i < this.tradeData.wmsArDetailGoodsVoList.length; i++) {
          if (this.tradeData.wmsArDetailGoodsVoList[i].scanWeight === null) {
            this.tradeData.wmsArDetailGoodsVoList[i].scanWeight = '-';
          }
        }
      }
      return this.tradeData.wmsArDetailGoodsVoList;
    },
    // 货物信息数据列
    goodsColumns() {
      if (this.isInArray([1, 3], this.tradeData.arStatus)) {
        this.baseColumns.splice(9, 2);
      }
      return this.baseColumns;
    }
  },
  data () {
    return {
      isBillDetail: false,
      spanArr: [],
      position: 0,
      storageId: null,
      baseColumns: [
        {
          label: '仓单业务号',
          prop: 'busNo'
        },
        {
          label: '货物名称',
          prop: 'goodsName'
        },
        {
          label: '柜号',
          prop: 'cntrNo'
        },
        {
          label: '生产厂家',
          prop: 'vendor'
        },
        {
          label: '原产地',
          prop: 'countryOrigin'
        },
        {
          label: '包装',
          prop: 'packageDesc'
        },
        {
          label: '生产日期',
          prop: 'productDate'
        },
        {
          label: '出售数量',
          prop: 'sellNum'
        },
        {
          label: '参考出售重量(kg)',
          prop: 'refTotalWeight'
        },
        {
          label: '抄码重量(kg)',
          prop: 'scanWeight'
        },
        {
          label: '交易金额(元)',
          prop: 'transactionAmount'
        },
        {
          label: '对应仓单',
          prop: 'wrId',
          merge: true
        }
      ],
      columnsSchema: {
        '对应仓单': {
          label: '对应仓单',
          width: 116,
          merge: true,
          fixed: 'right',
          component: Btn, // 'el-button'
          listeners: {
            'view-detail' (data) {
              that.wrId = data.wrId; // 仓单ID
              that.isBillDetail = true;
            }
          },
          propsHandler: function ({ row, col, column }) {
            return {row, col, column};
          }
        }
      },
      columnsProps: {
        height: 40,
        minWidth: 150,
        align: 'center',
        showOverflowTooltip: true
      },
      wrId: null // 仓单ID
    };
  },
  methods: {
    toDetail (index, row) {
      this.storageId = row.wrId;
      this.isBillDetail = true;
    },
    isInArray (arr, value) {
      for (var i = 0; i < arr.length; i++) {
        if (value === arr[i]) {
          return true;
        }
      }
      return false;
    },
    // 计算合计值的函数
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        };
        let emptyArr = [1, 2, 3, 4, 5, 6, 11];
        if (this.isInArray([1, 3], this.tradeData.arStatus)) {
          emptyArr = [1, 2, 3, 4, 5, 6, 9];
        }
        if (this.isInArray(emptyArr, index)) {
          sums[index] = '';
          return;
        }
        // 将表格中的每行数字数据相加
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // 对小数保留两位有效数字，四舍五入
          sums[index] = Number(sums[index].toFixed(2));
        } else {
        }
      });
      return sums;
    },
    // 提交
    confirmTrade (type) {
      let confirmMsgArr = ['确定同意吗？', '确定不同意吗？'];
      let params = {};
      params.confirmType = type;
      params.id = this.tradeData.id;
      params.version = this.tradeData.version;
      this.confirmModel(confirmMsgArr[type - 1], '/maliwms/ar/confirmAr', params, (res) => {
        if (res.code === 200) {
          this.successTip('提交成功', 3000);
          this.$emit('closeRefresh', 'page-tradeSale');
        }
      });
    }
  }
};
</script>
<style>
  .page-trade .page-trade-top{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .page-trade .page-trade-top .page-trade-title{
    height: 50px;
    line-height:50px;
    color:#333333;
    text-indent: 20px;
    border:1px solid #e3e4e6;
    font-size:16px;
    background-color:#fff;
  }
  .page-trade .page-trade-top ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .page-trade .page-trade-top ul li{
    width: 33.33%;
    height: 100px;
    padding-left: 20px;
    vertical-align: middle;
    display: inline-block;
    border-right: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    background-color: white;
  }
  .page-trade .page-trade-top ul li>div{
    color:#808080;
    font-size:14px;
    padding-top:20px;
  }
.page-trade .page-trade-top .maliiconfont{
  color: #ff6c2b;
  font-size:16px;
}
.page-trade .page-trade-top ul li p{
  color:#333333;
  font-size:14px;
  margin-top:16px;
  margin-bottom:10px;
}
.page-trade .page-trade-box .trade-box-title{
  height: 50px;
  line-height:50px;
  color:#333333;
  text-indent: 20px;
  border:1px solid #e3e4e6;
  font-size:16px;
  background: #fff;
  margin-top:20px;
  margin-bottom:0;
}
.page-trade .page-trade-box .trade-box-title-des{
  height: 50px;
  line-height:50px;
  color:#333333;
  text-indent: 20px;
  border:1px solid #e3e4e6;
  font-size:16px;
  background: #fff;
  border-top:none;
  margin-bottom:-1px;
}
.page-trade .page-trade-box .trade-box-title-des span{
  margin-right:30px;
}
.page-trade .page-trade-audit-box{
  background: #fff;
  min-height: 54px;
  box-sizing: border-box;
  padding-top: 18px;
  padding-left: 18px;
  padding-bottom: 8px;
  font-size:14px;
  color:#333;
  border:1px solid #e3e4e6;
  margin-top:30px;
}
.page-trade .page-trade-audit-box span{
  display: inline-block;
}
.page-trade .page-trade-audit-box span.title{
  width:70px;
  vertical-align: top;
}
.page-trade .page-trade-audit-box span.con{
  width:845px;
}
.page-trade .trade-btn-group{
  text-align: center;
  margin-top:40px;
}
.page-trade .trade-btn-group .trade-btn-agree{
  min-width: 140px;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  margin: 0 5px;
  background-color: #1383f2;
  border-radius: 2px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  border: none;
}
.page-trade .trade-btn-group .trade-btn-pass{
  min-width: 140px;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #1383f2;
  border-radius: 2px;
  color: #1383f2;
  font-size: 16px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}


  .page-trade .page-trade-top ul{
    position:relative;
    border-left:1px solid #e3e4e6;
  }
  .page-trade .page-trade-top ul li{
    height:96px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;

  }

.page-trade.sale .page-trade-audit-box span.title-trade{
  width:70px;
  vertical-align: top;
}
.page-trade.sale  .page-trade-audit-box span.con-trade{
    width:853px;
    vertical-align: top;
    display: inline-block;
}
</style>
